/*jquery时间必须绑定放置在函数中（1.jquery页面初始加载事件）2.js函数中*/
//添加数据绑定单击事件
$(function() {
	// 	/*jquery绑定事件*/
	// 	$(".checkUser").click(function(){
	// 		alert("check");
	// });

	$("#finish input:first").click(function() {
		var $phone = $("[name='phone']");
		// alert($phone);
		$phone.each(function(i) {
			if ($($phone[i]).val() == "") {
				alert("请填写完整的信息！！！");
			}
		});
	});


	//初始加载列表数据
	//js操作dom元素-->jquery也可以操作dom元素
	//ECMAScript：简称ES,ES6版本名称
	//js定义数据类型关键字，var是ES5之前，ES6建议使用let定义数据类型关键字。
	//需求：将前端页面静态数据更改成动态数据
	//使用json数据存储一个对象
	//未持照 1 已持照 0
	var arrStatus = new Array("自由行", "纯玩团");
	//使用json存储多个对象
	var jsonTRArrs = [{
			"TR_ID": "01",
			"TR_NAME": "成都室内亲子游",
			"TR_TYPE": 0,
			"TR_PRICE": "200",
			"TR_PHONE": "13574556682",
			"TR_USER": "章若阳",
			"CREATE_TIME": "2021-08-07"
		},
		{
			"TR_ID": "02",
			"TR_NAME": "峨眉山九寨沟轻松游",
			"TR_TYPE": 1,
			"TR_PRICE": "500",
			"TR_PHONE": "16833556681",
			"TR_USER": "孙媚",
			"CREATE_TIME": "2021-08-05"
		},
		{
			"TR_ID": "03",
			"TR_NAME": "都江堰·青城山一日游",
			"TR_TYPE": 0,
			"TR_PRICE": "200",
			"TR_USER": "章若阳",
			"TR_PHONE": "13574556682",
			"CREATE_TIME": "2021-08-07"
		}
	];

	//json展示 一个json对象，多个json对象
	// var jsonArrays = {
	// 	"jsonObj":
	// }
	//循环遍历数组对象
	var $trStr = "";
	$(jsonTRArrs).each(function(index) {
		var arrJson = jsonTRArrs[index];
		$trStr += `  <tr>                       
		<td>${arrJson.TR_ID}</td>
        <td>${arrJson.TR_NAME}</td>
     	<td class="markNo">${arrStatus[arrJson.TR_TYPE]}</td>
		<td>${arrJson.TR_PRICE}</td>
		<td>${[arrJson.TR_USER]}</td>
        <td>${arrJson.TR_PHONE}</td>
        <td>${arrJson.CREATE_TIME}</td>
		<td class="detailBt"><a href="#">详情</a>
		<a href="javascript:void(0);" class="del">删除</a></td>
				</tr>`;

	});


	//jquery绑定dom元素。
	//append追加到里面；append追加到外面。
	$(".tbody").append($trStr);


	// $(".firstline").appendTo($tr);
	//使用jquery进行各行换色
	$(".tbody tr").odd().css("background-color", "blanchedalmond");
	$(".tbody tr").even().css("background-color", "beige");



	//使用jquery动态删除当前数据   javascript:void(0);禁止刷新当前页面
	$(".del").click(function() {
		if (confirm("确定删除当前元素吗?")) {
			//删除，this删除当前dom元素
			$(this).parent().parent().remove();
		}
	});



	//jquery鼠标移进（mouseover，mousecenter）、移出事件（mouseout，mouseleave）
	//mouseover 和 mouseout 一套使用；mousecenter和mouseleave一起使用
	//mouseover和mousecenter区别：mouseover事件在鼠标移动到选取的元素及其子元素上时触发。

	//需求：鼠标移动到当前显示行，加深背景颜色
	$(".tbody2 tr").mouseover(function() {
		//常识：css（）样式添加的是行内样式  2.addclass()添加的是
		//	$(this).addClass("bg");
		//用行内样式
		$(this).css("background-color", "lightblue");
	});

	//鼠标移出
	$(".tbody2 tr").mouseout(function() {
		//
		//	$(this).removeClass("bg");
		//用行内样式
		$(this).css("background-color", "beige");
	});


	//hover鼠标移出事件，属于复合事件
	$(".tbody2 tr").hover(function() {
		$(this).css("font-size", "17px");
		// $(this).css("border", "5px solid black");
	}, function() {
		$(this).css("font-size", "15px");
	});


	//详情介绍

	//常识：css（）样式添加的是行内样式  2.addclass()添加的是
	//	$(this).addClass("bg");

	//使用json存储多个对象
	var jsonTRArrs2 = [{
			"ss_id": "01",
			"ss_name": "大熊猫繁育基地",
			"ss_duration": "1天",
			"ss_content": "可以看到刚出生不久的小熊猫"
		},
		{
			"ss_id": "02",
			"ss_name": "武侯祠",
			"ss_duration": "0.5天",
			"ss_content": "三国时期蜀国丞相诸葛亮的祠堂"
		},
		{
			"ss_id": "03",
			"ss_name": "宽窄巷子",
			"ss_duration": "0.5天",
			"ss_content": "一个有着老脸庞的怀旧地带"
		}
	];

	//json展示 一个json对象，多个json对象
	// var jsonArrays = {
	// 	"jsonObj":
	// }
	//循环遍历数组对象
	var $trStr2 = "";
	$(jsonTRArrs2).each(function(index) {
		var arrJson2 = jsonTRArrs2[index];
		$trStr2 += `  <tr>                       
					<td>${arrJson2.ss_id}</td>
			        <td>${arrJson2.ss_name}</td>
			     	<td>${arrJson2.ss_duration}</td>
					<td>${arrJson2.ss_content}</td>
					</tr>`;
	});


	//jquery绑定dom元素。
	//append追加到里面；append追加到外面。
	$(".tbody2").append($trStr2);


	// $(".firstline").appendTo($tr);
	//使用jquery进行各行换色
	$(".tbody2 tr").odd().css("background-color", "blanchedalmond");
	$(".tbody2 tr").even().css("background-color", "beige");



	// //显示隐藏1
	// $(".detailBt").click(function() {
	// $("#detail").toggle();
	// });
	
	//显示隐藏2
	$(".detailBt").click(function(){
				if($("#detail").css("display")=="none"){
					$("#detail").show();
				}else{
					$("#detail").hide();
				}
			});
});
